@namespace AntDesign.Pro.Layout
@inherits AntDomComponentBase

<Drawer
    Visible="_show"
    Width="300"
    Placement="right"
    Style="z-index: 999;">
    <Handler>
        <div class="@BaseClassName-drawer-handle" @onclick="SetShow">
            @if (_show)
            {
                <Icon Type="close" Theme="outline" Style="color: #fff; font-size: 20px;" />
            }
            else
            {
                <Icon Type="setting" Theme="outline" Style="color: #fff; font-size: 20px;" />
            }
        </div>
    </Handler>
    <ChildContent>
        <div class="@BaseClassName-drawer-content">
            <AntDesign.Pro.Layout.Body 
                Title="Page style setting" 
                PrefixCls="@BaseClassName">
                <BlockCheckbox 
                    PrefixCls="@BaseClassName"
                    List="ThemeList"
                    @bind-Value="@SettingState.Value.NavTheme"
                    OnChange="@(async x => await UpdateTheme())"/>
            </AntDesign.Pro.Layout.Body>

            <ThemeColor 
                Title="Theme Color"
                Colors="LightColorList"
                @bind-Value="@SettingState.Value.PrimaryColor"
                OnChange="@(async x => await UpdateTheme())"/>
            
            <Divider />
            
            <AntDesign.Pro.Layout.Body
                Title="Navigation Mode"
                PrefixCls="@BaseClassName">
                <BlockCheckbox 
                    PrefixCls="@BaseClassName"
                    List="LayoutList"
                    @bind-Value="@SettingState.Value.Layout"
                    OnChange="@(x => SetThemeList())"/>
            </AntDesign.Pro.Layout.Body>
            
            <LayoutSetting />
            
            <Divider />
            
            <AntDesign.Pro.Layout.Body
                Title="Regional Settings"
                PrefixCls="@BaseClassName">
                <RegionalSetting />
            </AntDesign.Pro.Layout.Body>
            
            <Divider />
            
            <AntDesign.Pro.Layout.Body
                Title="Other Settings"
                PrefixCls="@BaseClassName">
                <OtherSetting />
            </AntDesign.Pro.Layout.Body>
            
            @if (!HideHintAlert && !HideCopyButton)
            {
                <Divider />
            }
            
            @if (!HideHintAlert)
            {
                <Alert 
                    Type="warning"
                    Message="Setting panel shows in development environment only, please manually modify" 
                    Icon="_notification"
                    ShowIcon
                    Style="margin-bottom: 16px;"/>
            }
            
            @if (!HideCopyButton)
            {
                <Button Block OnClick="CopySetting">
                    <Icon Type="copy" Theme="outline" /> Copy Setting
                </Button>
            }
        </div>
    </ChildContent>
</Drawer>

<link type="text/css" rel="stylesheet" id="theme-style" href="@_url" @ref="_linkRef">
@code
{
    private RenderFragment _notification = @<Icon Type="notification"/>;
}
